    <template>
  <transition name="dialog-fade">
    <el-dialog
      v-if="bannerDialog"
      title="新增轮播图"
      class="dialog-banner"
      append-to-body
      :visible.sync="bannerDialog"
      width="50%"
    >
      <el-form ref="formInfo" :model="formInfo" class="demo-form-inline" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="formInfo.title"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="formInfo.sort"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="avatar">
          <el-upload
            class="avatar-uploader"
            action="https://m.sapiki.com//admin/common/imageUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        <div style="font-size: 12px;color: #6D6D6D;">尺寸宽750*高560</div>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="closeDialog(0)">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </transition>
</template>

<script>
import { bannerAdd } from "@/api/user";
import Base64 from "@/utils/base";
// import { getuserid } from '../../utils/auth'
export default {
  name: "DialogBanner",
  props: {
    // msg: {
    //   type: String,
    //   default: ''
    // },
    dialogTitle: {
      type: String,
      default: ""
    },
    itemInfo: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  inject: ["reload"],
  data() {
    return {
      //   rules:{
      //     avatar:[
      //         { required: true, message: "请上传图片", trigger: "change" }
      //     ]
      //   },
      imageUrl: "",
      userData: [
        {
          name: "lucky",
          phone: "15828947596",
          details: "",
          date: "12.23—01.01",
          time: "00:00—23:59",
          ord: "c-5",
          store: "莲花北店"
        }
      ],
      formInfo: {
        title:"",
        sort:"",
        avatar:""
      },
      bannerDialog: false
    };
  },
  mounted() {
    // this.getOpt()
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.file_path;
      this.formInfo.avatar = res.file_path
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type == "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
      }
    },
    // 保存操作
    submitForm() {
      //   const params = Object.assign(that.formInfo, {});
      //   that.$refs[formName].validate(valid => {
      //     if (valid) {
      if(this.formInfo.title==""){
           this.$message({
            message:'请输入标题',
            type:'warning'
          })
          return
      }
       if(this.formInfo.sort==""){
           this.$message({
            message:'请输入排序',
            type:'warning'
          })
          return
      }
         if(this.formInfo.avatar==""){
           this.$message({
            message:'请选择图片',
            type:'warning'
          })
          return
      }
      let params = {
        img: this.formInfo.avatar,
        title: this.formInfo.title,
        sort: this.formInfo.sort
      }
      bannerAdd({
        request_data: Base64.encode(JSON.stringify(params))
      }).then(res => {
         if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.$message({
          message: "操作成功！",
          type: "success"
        });
        this.bannerDialog = false;
        this.reload();
      });
      // 走保存请求
      //     } else {
      //       return false;
      //     }
      //   });
    }
  }
};
</script>

<style scoped lang="scss" scoped>
.dialog-fade-enter-active {
  -webkit-animation: dialog-fade-in 0.3s;
  animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
  -webkit-animation: dialog-fade-out 0.3s;
  animation: dialog-fade-out 0.3s;
}
@-webkit-keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
@keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
